<template>
  <el-table
    height="450"
    :data="tableList"
    @selection-change="handleSelectionChange"
    @row-click="selectByClickRow"
    ref="multipleTable"
    :row-key="(row) => row.name"
    size="medium"
    :cell-style="{ color: '#333333' }"
    :header-cell-style="{ background: '#F3F4F7', color: '#000000' }"
    :row-style="{ cursor: 'pointer' }"
  >
    <el-table-column
      type="selection"
      :reserve-selection="true"
      width="45"
      align="center"
    >
    </el-table-column>
    <el-table-column prop="name" show-overflow-tooltip>
      <template slot="header" slot-scope="scope">
        <!-- <div>名称</div> -->
        <div>
          <!-- <span>名称</span> -->
          <el-input
            type="text"
            v-model.trim="params.selectedName"
            @change="change(scope)"
            suffix-icon="el-icon-search"
            size="small"
            placeholder="名称"
          ></el-input>
        </div>
      </template>
    </el-table-column>
    <el-table-column prop="remark" show-overflow-tooltip>
      <template slot="header" slot-scope="scope">
        <!-- <div>备注</div> -->
        <div>
          <!-- <span>备注</span> -->
          <el-input
            type="text"
            v-model.trim="params.selectedRemark"
            @change="change(scope)"
            suffix-icon="el-icon-search"
            size="small"
            placeholder="备注"
          ></el-input>
        </div>
      </template>
    </el-table-column>
    <el-table-column
      show-overflow-tooltip
      label="类型"
      align="center"
      width="100"
    >
      <!-- <template slot="header">
        <template slot="header" slot-scope="scope">
        <div>
          <span>类型</span>
          <el-select
            v-model="params.selectedType"
            @change="change(scope)"
            placeholder="请选择类型"
            size="small"
          >
            <el-option
              v-for="item in typeList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </div>
      </template> -->
      <template slot-scope="scope">
        <span>{{ types.get(+scope.row.status) }}</span>
      </template>
    </el-table-column>
  </el-table>
</template>
<script>
export default {
  name: "TableList",
  props: {
    tableList: {
      type: Array,
      default: () => {
        return [];
      },
    },
    typeList: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  data: () => {
    return {
      params: {
        selectedName: "",
        selectedRemark: "",
        selectedType: 0,
      },
      types: new Map([[0, "表"]]),
    };
  },
  methods: {
    change() {
      this.$emit("changeSyncList", this.params);
    },
    handleSelectionChange(selected) {
      console.log("selected", selected);
      this.$emit("changeSelected", selected);
    },
    resetParams() {
      Object.assign(this.$data, this.$options.data());
      this.$refs.multipleTable.clearSelection();
      this.change();
    },
    selectByClickRow(row) {
      this.$refs.multipleTable.toggleRowSelection(row);
    },
  },
  watch: {},
};
</script>
<style lang="scss" scoped></style>
